<template>
    <div class="itemMain">
        <div class="itemTit">学生姓名</div>
        <div class="itemCont">
            <div class="stuName">{{name}}</div>
        </div>
        <!-- <div class="itemTit"><div>身份证号</div><div class="num">{{idcard.length}}/18</div></div>
        <div class="itemCont">
            <input v-model="idcard" @blur="checkCard" maxlength="18" placeholder="请输入18位身份证号">
        </div> -->
        <div class="itemTit">性别</div>
        <div class="itemCont clearfix">
            <div class="radio" :class="introsex == 1 ? 'cur' :''" @click="chooseSex(1)" >男</div>
            <div class="radio" :class="introsex == 2 ? 'cur' :''"  @click="chooseSex(2)">女</div>
        </div>
        <div class="itemTit">出生年月</div>
        <div class="itemCont" @click="chooseDate">
            <input id="demo" v-model="birthday" type="text" placeholder="选择出生日期" readonly>
            <span class="arrow"></span>
        </div>
         <van-popup v-model="showDate" round position="bottom" :style="{ height: '50%' }" @click-overlay="cancelChoose">
                <van-datetime-picker
                    v-model="currentDate"
                    type="year-month"
                    title="出生年月"
                    :minDate= "minDate"
                    :maxDate="maxDate"
                    :formatter="formatter"
                    @cancel="cancelChoose"
                    @confirm="confirm"

                />
        </van-popup>
        <div class="itemTit"><div>籍贯</div><div class="num">{{native.length}}/10</div></div>
        <div class="itemCont">
            <input v-model="native" maxlength="10" @blur="checkWrite" @focus="$focus" placeholder="请输入籍贯，最多10字">
        </div>
        <div class="itemTit"><div>民族</div><div class="num">{{nation.length}}/10</div></div>
        <div class="itemCont">
            <input v-model="nation" @blur="checkWrite" @focus="$focus" maxlength="10" placeholder="请输入民族，最多10字">
        </div>
        <div class="itemTit">少先队员</div>
        <div class="itemCont clearfix">
            <div class="radio" :class="yongPointeer == 1 ? 'cur' :''" @click="chooseYong(1)" >是</div>
            <div class="radio" :class="yongPointeer == 2 ? 'cur' :''"  @click="chooseYong(2)">否</div>
        </div>
        <div class="itemTit"><div>我的爱好</div><div class="num">{{hobby.length}}/25</div></div>
        <div class="itemCont">
            <input v-model="hobby" @blur="checkWrite" @focus="$focus" maxlength="25" placeholder="请输入内容，最多25字">
        </div>
        <div class="itemTit"><div>爱读的书</div><div class="num">{{book.length}}/25</div></div>
        <div class="itemCont">
            <input v-model="book" maxlength="25" @blur="checkWrite" @focus="$focus" placeholder="请输入内容，最多25字">
        </div>
        <div class="itemTit"><div>喜欢的运动</div><div class="num">{{exices.length}}/25</div></div>
        <div class="itemCont">
            <input v-model="exices" @blur="checkWrite" @focus="$focus" maxlength="25" placeholder="请输入内容，最多25字">
        </div>
        <div class="itemTit"><div>喜欢的榜样</div><div class="num">{{ouxiang.length}}/25</div></div>
        <div class="itemCont">
            <input v-model="ouxiang" @blur="checkWrite" @focus="$focus" maxlength="25" placeholder="请输入内容，最多25字">
        </div>
        <div class="itemTit"><div>我的兴趣</div><div class="num">{{intrest.length}}/25</div></div>
        <div class="itemCont">
            <input v-model="intrest" @blur="checkWrite" @focus="$focus" maxlength="25" placeholder="请输入内容，最多25字">
        </div>
    </div>
</template>

<script>
import  { checkIdcard,getBirthdatByIdN,getSex,getYAndM }from '@/utils/util'
import {axPost} from '@/api/index'
export default {
    data(){
        return{
            showDate:false,
            minDate:new Date(1960, 0, 1),
            maxDate:new Date(),
            name:localStorage.getItem('name'),
            school:localStorage.getItem('school'),
            userid:localStorage.getItem('userid'),
            currentDate: new Date(2011,0),
            noUanxian:true,
            errorMessage:'',
            introsex:1,
            // idcard:'',
            birthday:'',
            native:'',
            nation:'',
            yongPointeer:1,
            hobby:'',
            book:'',
            exices:'',
            ouxiang:'',
            intrest:''
        }
    },
    methods:{
        checkCard(e){
            // console.log('e',)
            this.$blur()
            sessionStorage.setItem('hasChange2',true)
            if(e.target.value == ''){
                return
            }
            if(checkIdcard(e.target.value) === '0'){
                this.noUanxian=true
                this.introsex = getSex(e.target.value)
                this.birthday =  getBirthdatByIdN(e.target.value)
                this.currentDate = getYAndM(this.birthday)
            }else{
                
                this.noUanxian=false
                this.errorMessage = checkIdcard(e.target.value)
                this.$Tips(this.errorMessage)
            }
        },
        checkWrite(){
            this.$blur()
            sessionStorage.setItem('hasChange2',true)
        },
        chooseSex(type){
             sessionStorage.setItem('hasChange2',true)
             this.introsex =type
        },
        chooseYong(type){
            sessionStorage.setItem('hasChange2',true)
            this.yongPointeer =type
        },
        chooseDate(){
            this.showDate =true
        },
        cancelChoose(){
            console.log('99999')
            this.showDate =false
        },
        confirm(){
            sessionStorage.setItem('hasChange2',true)
            this.formatDateTime(this.currentDate)
            this.showDate =false
        },
        formatter(type, val) {
            if (type === 'year') {
                return `${val}年`;
            } else if (type === 'month') {
                return `${val}月`;
            }
            return val;
        },
         // 格式化时间
        formatDateTime (date) {
            // var date = new Date(date);
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            m = m < 10 ? ('0' + m) : m;
            console.log('val',y,m)
            this.birthday = `${y}年${m}月`
            // var d = date.getDate();
            // d = d < 10 ? ('0' + d) : d;
            // var h = date.getHours();
        },
      
        submit(type){
            // if(!this.noUanxian && this.idcard !==''){
            //     this.$Tips(this.errorMessage)
            //     return
            // }
            let state = 0
            if( this.birthday !='' && this.native !='' && this.nation!='' && this.hobby != '' && this.book !='' && this.exices !='' && this.ouxiang !='' && this.intrest !=''){
                state =1
            }
           if(type === 'prodetail'){
                const introinfo ={
                    "IntroName":this.name,
                    // "IntroIdCard":this.idcard,
                    "IntroSex":this.introsex,
                    "IntroBirthday":this.birthday,
                    "IntroNative":this.native,
                    "IntroNation":this.nation,
                    "IntroYoungPioneer":this.yongPointeer,
                    "IntroHobby":this.hobby,
                    "IntroBook":this.book,
                    "IntroExercise":this.exices,
                    "IntroExample":this.ouxiang,
                    "IntroInterest":this.intrest,
                    "IntroState":state
                }
               axPost('ChangQingAddOrUpdateGrowRecord',{
                   school:this.school,
                   userid:this.userid,
                   introinfo:introinfo
               }).then((res)=>{
                 console.log('---------------',res)
                   if(res.ResultCode == 1){
                       sessionStorage.getItem('hasChange2') && sessionStorage.removeItem('hasChange2')
                       this.$Tips({
                            content:'提交成功',
                            icon:'correct'
                        })
                         this.$emit('update')
                   }
               })
           }
        },
    }
}
</script>

<style lang='scss' scoped>
.itemMain {
    /deep/{
        .van-picker__title{
            color: #333333;
            font-weight: bold;
            font-size: .36rem;
        }
        .van-picker__cancel{
            color: #cccccc;
            font-size: .32rem;
        }
        .van-picker__confirm{
            color: #168DFF;
            font-size: .32rem;
        }
        .van-picker-column__item{
            color: #cccccc;
            font-size: .4rem;
        }
        .van-picker-column__item--selected{
            color: #333333;
            font-weight: bold;
            font-size: .4rem;
        }
    }
}
.itemMain{
    width: 100%;
    height: 100%;
    padding: .3rem;
    overflow: auto;
    .itemTit{
        width: 100%;
        font-size: .32rem;
        color: #262727;
        font-weight: bold;
        display: flex;
        justify-content: space-between;
        .num{
            color: #B6B8B8;
            font-size: .24rem;
            font-weight: normal;
        }
    }
    .itemCont{
        padding: .2rem 0;
        margin-bottom: .1rem;
        position: relative;
        input{
            width: 100%;
            height: .8rem;
            padding-left: .2rem;
            border: 1px solid #E4E5E6;
        }
        .radio{
            float: left;
            margin-right: .8rem;
            padding-left: .5rem;
            line-height: .4rem;
            position: relative;
            &::before{
                content: '\20';
                position: absolute;
                width: .4rem;
                height: .4rem;
                top: 0;
                left: 0;
                border-radius: .2rem;
                background: #EFF1F3;
            }
            &::after{
                content: '\20';
                position: absolute;
                width: .12rem;
                height: .12rem;
                top: .14rem;
                left: .14rem;
                border-radius: .06rem;
                background: #DADFE6;
            }
            &.cur{
                &::before{
                    content: '\20';
                    position: absolute;
                    width: .4rem;
                    height: .4rem;
                    top: 0;
                    left: 0;
                    border-radius: .2rem;
                    background: #168DFF;
                }
                &::after{
                    content: '\20';
                    position: absolute;
                    width: .12rem;
                    height: .12rem;
                    top: .14rem;
                    left: .14rem;
                    border-radius: .06rem;
                    background: #FFF;
                } 
            }
        }
        .arrow{
            display: inline-block;
            width: .2rem;
            height: .4rem;
            background:url('~@/assets/img/arrow.png') no-repeat;
            background-size: contain;
            position: absolute;
            right: .25rem;
            top: .45rem
        }
      
    }
    .stuName{
        font-size: .4rem;
        color: #B6B8B8;
    }
}

</style>